<script setup>
import { ref, reactive, toRef, onMounted } from 'vue'
const props = defineProps({
	basicDetails: {
		type: Object,
		default: {}
	}
})
</script>

<template>
	<div class="allStyle">
		<div style="flex: 1">
			<div style="margin: 24px">基本详情</div>
			<div class="baseStyle">
				<!-- <div style="margin-bottom: 20px; margin-left: 17px">
					<span style="color: #8d8d8d">创建者: </span>
					<el-tag class="ml-2" type="info">小刘</el-tag>
				</div> -->
				<div style="margin-bottom: 20px">
					<span style="color: #8d8d8d">创建时间: </span> {{ props.basicDetails.ctime }}
				</div>
				<div style="margin-bottom: 20px">
					<span style="color: #8d8d8d">群发对象: </span>
					<span v-for="item in props.basicDetails.groups">【{{ item.name }}】</span>等{{
						props.basicDetails.groups ? props.basicDetails.groups.length : 0
					}}个群聊
				</div>
				<div style="margin-bottom: 20px">
					<span style="color: #8d8d8d">群发内容: </span>
					<span style="color: #13b5d1"
						>共[{{ props.basicDetails.adjunct_data ? props.basicDetails.adjunct_data.length + 1 : 1 }}]条</span
					>
					<div>【文字】{{ props.basicDetails.content }}</div>
					<div v-for="item in props.basicDetails.adjunct_data">
						<div v-if="item.type == 1">【图片】{{ item.title }}</div>
						<div v-if="item.type == 2">【链接】{{ item.link_title }}</div>
						<div v-if="item.type == 3">【小程序】{{ item.miniprogram_title }}</div>
					</div>
				</div>
			</div>
		</div>
		<div style="flex: 1">
			<div style="">客户接收消息</div>
			<img src="../../../../assets/phone.png" />
		</div>
	</div>
</template>

<style scoped>
.allStyle {
	margin: 20px;
	display: flex;
	background-color: #ffffff;
	border-radius: 10px;
	height: 580px;
}
.baseStyle {
	margin-left: 28px;
}
.baseStyleChild {
}
</style>
